<template>
  <!-- 在vue2中, template中只能有一个根标签 -->
  <div class="app">
    <div class="box">
      <button @click="fn">点我</button>
    </div>
  </div>
</template>

<script>
// 可以在该对象中写配置项(data, methods, computed, ...) 和 生命周期的钩子函数
export default {
  created() {
    console.log("我被执行了");
  },
  methods: {
    fn() {
      alert("点我干嘛?");
    },
  },
};
</script>

<style lang="less">
// 1. 设置 lang="less"
// 2. 安装包 yarn add less less-loader -D
.app {
  width: 400px;
  height: 500px;
  background-color: red;
  margin: 0 auto;
  .box {
    width: 300px;
    height: 300px;
    background-color: green;
  }
}
</style>